//获取当前商品ID
var id = getQuaryString("id")

//当前商品数据
var datas
var arr = detail.filter((item)=>{
    return id === item.id
})
//如果找不到商品数据，则使用默认商品数据
if(arr.length === 0){
    datas = detail[0]
}
else{//使用找到的商品数据
    datas = arr[0]
}

//渲染路径导航
$(".goods_path").innerHTML = `<a href="./index.html">商城首页</a>
                              <span>/</span>
                              <a href="./list.html?class=${datas.class}">${datas.titleparent[0]}</a>
                              <span>/</span>
                              <a href="">${datas.titleparent[1]}</a>`

//渲染图片列表(小图片)
var tmp1 = ''
datas.imggood.forEach((item)=>{
    tmp1 += `<li>
                <img src="${item}" alt="">
            </li>`
})
$(".goods .left ul").innerHTML = tmp1
//渲染大图片
$(".container img").src = `${datas.imggood[0]}`
//渲染放大镜中的大图片
$(".goods .bigimg img").src = `${datas.imggood[0]}`
//渲染商品名称
$(".top").innerHTML = `<h2>${datas.title}</h2>
                       <span>￥${datas.price}</span>
                       <h5><i>邮费:</i>&emsp;免费</h5>`
//渲染商品描述
var tmp3 = ''
datas.description.forEach((item)=>{
    tmp3 += `<li>${item}</li>`
})
$(".middle ul").innerHTML = tmp3
//渲染页面下方的背景图片
var tmp4 = ''
datas.imgds.forEach((item)=>{
    tmp4 += `<img src="${item}" alt="">`
})
$(".bgs").innerHTML = tmp4

//放大镜效果

//鼠标移入 mask 和 bigimg 显示
$(".container").onmouseover = function(){
    $(".mask").style.display = "block"
    $(".bigimg").style.display = "block"
}

//鼠标移入 mask 和 bigimg 隐藏
$(".container").onmouseout = function(){
    $(".mask").style.display = "none"
    $(".bigimg").style.display = "none"
}

//鼠标移动，mask跟着移动
$(".container").onmousemove = function(e){
    var mask_left = e.pageX - offset(this).left - $(".mask").clientWidth/2
    var mask_top = e.pageY - offset(this).top - $(".mask").clientHeight/2

    //判断
    if(mask_left<0){
        mask_left = 0
    }
    if(mask_top<0){
        mask_top = 0
    }
    if(mask_left>($(".container").clientWidth-$(".mask").clientWidth)){
        mask_left = $(".container").clientWidth-$(".mask").clientWidth
    }
    if(mask_top>($(".container").clientHeight-$(".mask").clientHeight)){
        mask_top = $(".container").clientHeight-$(".mask").clientHeight
    }

    //赋值
    $(".mask").style.left = mask_left + "px"
    $(".mask").style.top = mask_top + "px"

    //计算比例
    var scaleX = mask_left / ($(".container").clientWidth-$(".mask").clientWidth)
    var scaleY = mask_top / ($(".container").clientHeight-$(".mask").clientHeight)

    var bigimg_left = scaleX * ($(".bigimg img").clientWidth - $(".bigimg").clientWidth)
    var bigimg_top = scaleY * ($(".bigimg img").clientHeight - $(".bigimg").clientHeight)

    //赋值
    $(".bigimg img").style.left = - bigimg_left + "px"
    $(".bigimg img").style.top = - bigimg_top + "px"
}

//图片切换效果
var showIndex = 0
var imgs = $(".left ul li img")
imgs[0].className = "active"
for(var i = 0 ; i < imgs.length ;i++){
    imgs[i].index = i
    imgs[i].onclick = function(){

        imgs[showIndex].className = ""
        
        this.className = "active"

        $(".container img").src = this.src
        $(".goods .bigimg img").src = this.src

        showIndex = this.index
    }
}